<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
	<meta charset="utf-8">
	<title>动态排序-2-2（业绩）</title>
	<script src="../static/js/echarts.js"></script>
	<!-- <script src="../static/js/echarts.min.js"></script> -->
	
	<script src="../../element/static/js/jquery-3.5.1.js"></script>
</head>
<body style="height: 100%; margin: 0">
	<div id="main" style="height: 100%"></div>
</body>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'), null, {
	renderer: 'canvas',
	useDirtyRect: false
});
// console.log(document.getElementById('main').clientWidth);

/* 
动态排序柱状图通常是横向的柱条，如果想要采用纵向的柱条，只要把本教程中的 X 轴和 Y 轴相反设置即可。

柱状图系列的 realtimeSort 设为 true，表示开启该系列的动态排序效果
yAxis.inverse 设为 true，表示 Y 轴从下往上是从小到大的排列
yAxis.animationDuration 建议设为 300，表示第一次柱条排序动画的时长
yAxis.animationDurationUpdate 建议设为 300，表示第一次后柱条排序动画的时长
如果想只显示前 n 名，将 yAxis.max 设为 n - 1，否则显示所有柱条
xAxis.max 建议设为 'dataMax' 表示用数据的最大值作为 X 轴最大值，视觉效果更好
如果想要实时改变标签，需要将 series.label.valueAnimation 设为 true
animationDuration 设为 0，表示第一份数据不需要从 0 开始动画（如果希望从 0 开始则设为和 animationDurationUpdate 相同的值）
animationDurationUpdate 建议设为 3000 表示每次更新动画时长，这一数值应与调用 setOption 改变数据的频率相同
以 animationDurationUpdate 的频率调用 setInterval，更新数据值，显示下一个时间点对应的柱条排序
*/

var option;
const updateFrequency = 2000;
const userColors = {
	41: '#00008b',
	24: '#f00',
	227: '#ffde00',
	8: '#002a8f',
	163: '#003580',
	23: '#ed2939',
	121: '#000',
	216: '#003897',
	211: '#f93',
	206: '#bc002d',
	201: '#024fa2',
	221: '#000',
	250: '#00247d',
	251: '#ef2b2d',
	230: '#dc143c',
	220: '#d52b1e',
	222: '#e30a17',
};
const arr_user = {
	41: '孙艳',
	24: '胡文豪',
	227: '肖协炎',
	8: '朱可可',
	163: '兰重霄',
	23: '张倩',
	121: '李想',
	216: '郑智锋',
	211: '朱廷旭',
	206: '殷乐凌',
	201: '尹朝雯',
	221: '易彬',
	250: '刘雅',
	251: '汪晓琴',
	230: '刘晓丽',
	220: '杨新',
	222: '吴成恩',
}

$.when(
	$.getJSON('static/data822.json')
).done(function (res) {
	const data = res;
	const yymm = [];	//['YYMM', 2201, 2202, 2203, 2204]
	for (let i = 0; i < data.length; ++i) {
		if (yymm.length === 0 || yymm[yymm.length - 1] !== data[i][2]) {
			yymm.push(data[i][2]);
		}
	}
	
	console.log(data);
	console.log(yymm);
	
	let startIndex = 1;
	let startYymm = yymm[startIndex];
	function getStrYymm(index){
		let ym = String(yymm[index]);
		let yy = ym.slice(0, 2);
		let mm = ym.slice(-2);
		let str_ym = yy + '年' + mm + '月';
		return str_ym;
	};
	let str_yymm = getStrYymm(startIndex);
	
	option = {
		grid: {top: 10, bottom: 30, left: 80, right: 80},
		xAxis: {
			max: 'dataMax',
			axisLabel: {
				formatter: function (n) {
					return ((n / 10000).toFixed(2)) + " 万";
				}
			}
		},
		dataset: {
			source: data.slice(1).filter(function (d) {
				return d[2] === startYymm;
			})
		},
		yAxis: {
			type: 'category',
			inverse: true,
			max: 9,
			axisLabel: {
				show: true,
				fontSize: 14,
				formatter: function (value) {
					return arr_user[value];
				},
			},
			animationDuration: 300,
			animationDurationUpdate: 300
		},
		series: [
			{
				realtimeSort: true,
				seriesLayoutBy: 'column',
				type: 'bar',
				itemStyle: {
					color: function (param) {
						return userColors[param.value[1]] || '#5470c6';
					}
				},
				encode: {
					x: 0,
					y: 1
				},
				label: {
					show: true,
					precision: 1,
					position: 'right',
					valueAnimation: true,
					fontFamily: 'monospace'
				}
			}
		],
		animationDuration: updateFrequency,
		animationDurationUpdate: updateFrequency,
		animationEasing: 'linear',
		animationEasingUpdate: 'linear',
		graphic: {
			elements: [
				{
					type: 'text',
					right: 160,
					bottom: 60,
					style: {
						text: str_yymm,
						font: 'bolder 80px monospace',
						fill: 'rgba(100, 100, 100, 0.25)'
					},
					z: 100
				}
			]
		}
	};
	console.log(option);
	myChart.setOption(option);
	function updateYymm(index) {
		console.log(index);
		let source = data.slice(1).filter(function (d) {
			return d[2] === yymm[index];
		});
		option.series[0].data = source;
		option.graphic.elements[0].style.text = getStrYymm(index);
		myChart.setOption(option);
	}
	
	var up_set = setInterval(function() {
		startIndex++;
		updateYymm(startIndex);
		
		if(startIndex >= yymm.length - 1){
			clearInterval(up_set);
		}
	}, updateFrequency + 800);
	
	
})

</script>
</html>
